<template>
  <div :class="$style.board">
    <el-dialog
      v-model="open"
      fullscreen
      width="100%"
      :before-close="backStorage"
    >
      <div style="width: 100%; height: 100%; background: rgb(30, 53, 68)">
        <div>
          <div slot="header"></div>
          <h1 style="text-align: center; color: rgb(247, 248, 249)">
            仓库库存及出货排程看板
          </h1>
        </div>
        <div
          style="display: flex; width: 100%; height: 95%; position: relative"
        >
          <div style="position: absolute; right: 22px; top: -33px">
            <el-select
              multiple
              v-model="sele"
              style="width: 380px"
              @change="seleChange"
              size="mini"
            >
              <el-option label="海尔电热" value="HD" />
              <el-option label="海尔空调" value="HK" />
              <el-option label="海尔冷柜" value="HL" />
              <el-option label="TCL" value="TK" />
              <el-option label="其他" value="other" />
            </el-select>
          </div>
          <div
            class="table1"
            style="
              width: 50%;
              height: 100%;
              padding-left: 20px;
              position: relative;
            "
          >
            <div
              style="
                color: rgb(247, 248, 249);
                font-size: 16px;
                position: absolute;
                top: -25px;
                left: 20px;
              "
            >
              当前实时时间:{{ newData }}
            </div>
            <el-table
              :data="tableData2"
              :row-class-name="tableRowClassName"
              :cell-class-name="tableRowClassNameC"
              :header-cell-class-name="$style.headerRow"
              border
            >
              <el-table-column
                label="序号"
                prop="index"
                width="50"
              ></el-table-column>
              <el-table-column
                label="机型"
                show-overflow-tooltip
                prop="ksJzdm"
                width="80"
              ></el-table-column>
              <el-table-column
                label="专用号"
                show-overflow-tooltip
                prop="ksCustwldm"
                width="90"
              ></el-table-column>
              <el-table-column
                label="名称"
                show-overflow-tooltip
                prop="ksWlpm"
              ></el-table-column>
              <el-table-column
                label="即时库存数"
                show-overflow-tooltip
                prop="ksKcsl"
                width="100"
              ></el-table-column>
              <el-table-column label="出货计划" prop="xjtJtbh" width="10">
                <el-table-column
                  :label="weakData[0]"
                  show-overflow-tooltip
                  prop="ksDdsl1"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag1 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl1 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag1 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl1 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag1 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl1 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[1]"
                  prop="ksDdsl2"
                  show-overflow-tooltip
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag2 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl2 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag2 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl2 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag2 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl2 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[2]"
                  prop="ksDdsl3"
                  show-overflow-tooltip
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag3 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl3 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag3 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl3 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag3 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl3 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[3]"
                  show-overflow-tooltip
                  prop="ksDdsl4"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag4 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl4 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag4 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl4 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag4 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl4 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[4]"
                  show-overflow-tooltip
                  prop="ksDdsl5"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag5 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl5 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag5 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl5 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag5 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl5 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[5]"
                  show-overflow-tooltip
                  prop="ksDdsl6"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag6 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl6 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag6 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl6 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag6 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl6 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[6]"
                  show-overflow-tooltip
                  prop="ksDdsl7"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag7 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl7 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag7 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl7 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag7 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl7 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[7]"
                  show-overflow-tooltip
                  prop="ksDdsl8"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag8 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl8 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag8 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl8 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag8 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl8 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[8]"
                  show-overflow-tooltip
                  prop="ksDdsl9"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag9 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl9 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag9 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl9 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag9 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl9 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[9]"
                  show-overflow-tooltip
                  prop="ksDdsl10"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag10 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl10 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag10 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl10 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag10 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl10 }}</span
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <p style="display: inline-block; color: red">
              注：红色字体代表已发货;
            </p>
            <p style="display: inline-block; color: #00cf00">
              绿色字体代表发货中;
            </p>
            <p style="display: inline-block; color: white">
              白色字体代表待发货
            </p>
          </div>
          <div
            class="table1"
            style="
              width: 50%;
              height: 100%;
              margin-left: -2px;
              z-index: 999;
              padding-right: 20px;
            "
            height="100%"
          >
            <el-table
              :data="tableData3"
              :cell-style="cellStyle"
              :row-style="{ height: '0px' }"
              :row-class-name="tableRowClassName"
              :cell-class-name="tableRowClassNameC"
              :header-cell-class-name="$style.headerRow"
              :header-row-style="{ height: '0px' }"
              border
            >
              <el-table-column
                label="序号"
                prop="index"
                width="50"
              ></el-table-column>
              <el-table-column
                label="机型"
                show-overflow-tooltip
                prop="ksJzdm"
                width="80"
              ></el-table-column>
              <el-table-column
                label="专用号"
                show-overflow-tooltip
                prop="ksCustwldm"
                width="90"
              ></el-table-column>
              <el-table-column
                label="名称"
                show-overflow-tooltip
                prop="ksWlpm"
              ></el-table-column>
              <el-table-column
                label="即时库存数"
                show-overflow-tooltip
                prop="ksKcsl"
                width="100"
              ></el-table-column>
              <el-table-column label="出货计划" prop="xjtJtbh" width="10">
                <el-table-column
                  :label="weakData[0]"
                  show-overflow-tooltip
                  prop="ksDdsl1"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag1 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl1 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag1 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl1 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag1 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl1 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[1]"
                  prop="ksDdsl2"
                  show-overflow-tooltip
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag2 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl2 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag2 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl2 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag2 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl2 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[2]"
                  prop="ksDdsl3"
                  show-overflow-tooltip
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag3 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl3 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag3 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl3 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag3 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl3 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[3]"
                  show-overflow-tooltip
                  prop="ksDdsl4"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag4 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl4 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag4 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl4 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag4 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl4 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[4]"
                  show-overflow-tooltip
                  prop="ksDdsl5"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag5 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl5 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag5 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl5 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag5 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl5 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[5]"
                  show-overflow-tooltip
                  prop="ksDdsl6"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag6 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl6 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag6 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl6 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag6 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl6 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[6]"
                  show-overflow-tooltip
                  prop="ksDdsl7"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag7 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl7 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag7 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl7 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag7 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl7 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[7]"
                  show-overflow-tooltip
                  prop="ksDdsl8"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag8 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl8 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag8 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl8 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag8 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl8 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[8]"
                  show-overflow-tooltip
                  prop="ksDdsl9"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag9 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl9 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag9 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl9 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag9 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl9 }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :label="weakData[9]"
                  show-overflow-tooltip
                  prop="ksDdsl10"
                  width="45"
                >
                  <template #default="scope">
                    <span
                      v-if="scope.row.ksDdFlag10 == '1'"
                      style="color: #97ec1f"
                      >{{ scope.row.ksDdsl10 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag10 == '2'"
                      style="color: red"
                      >{{ scope.row.ksDdsl10 }}</span
                    >
                    <span
                      v-if="scope.row.ksDdFlag10 == '0'"
                      style="color: white"
                      >{{ scope.row.ksDdsl10 }}</span
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BoardService from "@/api/board/board";

export default {
  data() {
    return {
      //外部数据表格
      sele: "海尔电热",
      khdm2: "海尔电热",
      tableData: ["星期一"],
      weakData: ["星期一"],
      tableData2: [],
      tableData3: [],
      open: true,
      newData: null,
      //当前时间
      nowTime: null,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        xjtType: "E",
        xjtDateBegin: this.moment().add(-30, "days").format("YYYY-MM-DD"),
        xjtDateEnd: this.moment().add(60, "days").format("YYYY-MM-DD"),
      },

      intver: null,
      timer2: null,
      hTime: {
        H1: "H1",
        H2: "H2",
        H3: "H3",
        H4: "H4",
        H5: "H5",
      },
      options: [
        {
          value: "√",
          label: "√",
        },
        {
          value: "×",
          label: "×",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  destroyed() {
    clearInterval(this.intver);
    clearInterval(this.timer2);
  },
  mounted() {
    this.intver = setInterval(() => {
      this.getList();
    }, 600000);
    this.timer2 = setInterval(() => {
      this.getTime();
    }, 600000);
  },
  methods: {
    //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    getTime() {
      //new Date() new一个data对象，当前日期和时间
      //toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
      this.nowTime = this.moment().format();
    },
    handleCell({ row, column, rowIndex, columnIndex }) {
      return "padding:0px;font-size:'12px';line-height: 10px;text-align:center;";
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return "padding:0px;font-size:'12px';color:rgb(247,248,249)";
    },
    seleChange() {
      this.getList(this.sele);
    },
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      return "warning-row";
    },
    tableRowClassNameC({ row, column, rowIndex, columnIndex }) {
      if (column.label.substring(3, 5) === this.newData.substring(7, 9)) {
        // column.label.substring(3,5) === this.newData.substring(7,9)
        return "success-cell";
      }
      return "";
    },
    getList(row) {
      let ck = "HEDR009";
      let ckd = row || ck;
      if (ckd.length == 0) {
        ckd = ck;
      }
      this.newData = new Date().toLocaleDateString();
      // GET /board/getInventoryShipment/{ckd}
      BoardService.getinventoryShipment(ckd).then((res) => {
        this.tableData2 = [];
        this.tableData3 = [];
        this.tableData = [];
        this.tableData = res.date;
        this.$set(
          this,
          "weakData",
          this.tableData.map((a) => {
            a = a.replace("星期", "\n周");
            return a;
          })
        );
        console.log(this.weakData);
        this.khdm2 = res.khdm;
        this.tableData2 = res.list.slice(0, 45);
        this.tableData3 = res.list.slice(45, 90);
      });
    },
    backStorage() {
      // 返回上级路由并关闭当前路由
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push({ path: "/index" });
    },
  },
};
</script>

<style lang="scss" module>
@use "./board.scss";
/*.el-table th.el-table__cell>.cell{*/
/*  padding: 2px;*/
/*}*/
.board {
  :global {
    .warning-row {
      background: rgb(30, 53, 68);
      color: #ffffff;
    }
    .success-cell {
      background: rgb(2, 81, 95);
      color: black;
    }
    .success-row {
      background: rgb(30, 53, 68);
    }
    .el-table__empty-text {
      background: rgb(30, 53, 68);
      width: 100%;
    }
    .el-table .cell {
      height: 18px;
    }
    .el-dialog__wrapper .el-dialog .el-dialog__body {
      padding: 0px 20px;
    }
  }
  .headerRow {
    padding: 0px !important;
    font-size: "12px" !important;
    line-height: 10px !important;
    text-align: center !important;
    color: rgb(247, 248, 249) !important;
    background: rgb(2, 81, 95) !important;
    :global {
      .cell {
        padding: 0px !important;
        white-space: normal;
        display: inline-table;
      }
    }
  }
}
</style>
